<template>
  <div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="101px"
        label-position="left"
      >
        <el-col :span="12">
          <el-row :gutter="15">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              width="500px"
              height="450px"
            />
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="商品名称" prop="courseName">
                <span>{{ formData.courseName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品价格" prop="price">
                <span style="color: red">💴{{ formData.price }}元</span>
              </el-form-item>
            </el-col>
            <el-form-item label="讲师" prop="price">
              <span>{{ formData.teacher }}</span>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            
           <el-button type="success" round @click="submitForm">加入购物车</el-button>
         
            <el-button type="warning" round @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-link type="primary" @click="xs(false)">课纲隐藏</el-link>
            <el-link type="primary" @click="xss(true)">课纲显示</el-link>
            <div id="app">
              <div v-if="have">
                在互联网发展浪潮中，数据对于企业的价值是非常大的，怎么管理好数据，以及快速挖掘数据价值，共享数据价值，急需一套解决方案，在数据开发中，核心数据模型的变化是相对缓慢的，同时，对数据进行维护的工作量也非常大；但业务创新的速度、对数据提出的需求的变化，是非常快速的。数据中台的出现，就是为了弥补数据开发和应用开发之间，由于开发速度不匹配，出现的响应力跟不上的问题。数据中台解决的问题，包括：效率问题、协作问题、能力问题，数据中台是聚合和治理跨域数据，将数据抽象封装成服务，提供给前台以业务价值的逻辑概念。本课程基于真实企业数据中台建设架构进行讲解，带大家构建数据中台，通过学习完本课程可以节省你摸索的时间，节省企业成本，提高企业开发效率。
                课程包含几大模块：数据源管理、数据接入管理、数据质量管理、数据质量报告、数据安全管理、数据查询IDE、数据血缘以及元数据管理、数据中台实战应用等，对于数据中台涉及到的业务以及技术进行详尽的讲解。
                <img :src="bookImg" /><br />
                在互联网发展浪潮中，数据对于企业的价值是非常大的，怎么管理好数据，以及快速挖掘数据价值，共享数据价值，急需一套解决方案，在数据开发中，核心数据模型的变化是相对缓慢的，同时，对数据进行维护的工作量也非常大；但业务创新的速度、对数据提出的需求的变化，是非常快速的。数据中台的出现，就是为了弥补数据开发和应用开发之间，由于开发速度不匹配，出现的响应力跟不上的问题。数据中台解决的问题，包括：效率问题、协作问题、能力问题，数据中台是聚合和治理跨域数据，将数据抽象封装成服务，提供给前台以业务价值的逻辑概念。
                本课程基于真实企业数据中台建设架构进行讲解，带大家构建数据中台，通过学习完本课程可以节省你摸索的时间，节省企业成本，提高企业开发效率。
                课程包含几大模块：数据源管理、数据接入管理、数据质量管理、数据质量报告、数据安全管理、数据查询IDE、数据血缘以及元数据管理、数据中台实战应用等，对于数据中台涉及到的业务以及技术进行详尽的讲解。
                本课程包含的技术： 开发工具为：IDEA、WebStorm Flink1.9.0
                ClickHouse Hadoop2.6.0、Hue Hbase1.0.0 Kafka2.1.0 Hive1.0.0
                HDFS、MapReduce Zookeeper、Atlas SpringBoot2.0.8.RELEASE Spring
                Mybatis MySQL Vue.js、Nodejs ElemntUI 课程亮点：
                1.与企业接轨、真实工业界产品 2.全方位管理、治理数据
                3.大数据以及业务系统数据与企业接轨
                4.支撑业务系统数据使用以及共享
                5.集成IDE可视化查询和集成元数据管理和血缘追溯
                6.ClickHouse高性能列式存储数据库 7.数据中台项目应用实战
                8.Flink+ClickHouse技术架构 9.微服务架构技术SpringBoot技术架构
                10.后端+大数据技术栈+前端可视化 11.提供企业的技术落地指导支持
                12.课程凝聚讲师多年实战经验，经验直接复制
                13.掌握全部内容能独立进行大数据用户平台的设计和实操
                企业一线架构师讲授，代码在老师的指导下企业可以复用，提供企业解决方案。
                <br />

                <span style="color: red"
                  >版权归作者所有，盗版将进行法律维权。</span
                >
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: [{
          imgUrl :'',
          courseName :'',
          courseTid :'',
          price :undefined,
          isup :undefined,
          state :undefined,
          teacher :'',
      }],
      rules: {},
      have: 111,
      haves: 222,
      bookImg: require("@/assets/logo.png"),
    };
  },
  computed: {},
  watch: {},
  created() {
    this.axios
      .get(
        "https://localhost:44392/api/app/i-bUssin-vur/" +
          this.$route.query.id +
          "/enit"
      )
      .then((x) => {
        this.formData = x.data[0];
      });
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        this.axios.post('https://localhost:44392/api/app/i-bussin-vues-appserv/add',{courseName:this.formData.courseName,courseTid:this.formData.courseTid,price:this.formData.price,isup:this.formData.isup,state:this.formData.state,teacher:this.formData.teacher}).then(x=>{
             alert("成功加入购物车!")
        })
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    xs(have) {
      this.have = false;
    },
    xss(have) {
      this.have = true;
    },
  },
};
</script>
<style>
</style>
